<template>
	<view class="contain">
		<view class="whiteBox">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
					<u--form labelPosition="left" ref="form1">
						<u-form-item label="头像:" prop="userInfo.name" ref="item1">
							<view @click="clickimg" ><u--image :showLoading="true" :src="imgsrc" width="70px" height="70px" shape="circle"></u--image></view>
						</u-form-item>
						<u-form-item label="姓名:" labelWidth="70" prop="userInfo.name" ref="item1">
							<u--input v-model="userInfo.name"  border="surround" :customStyle="inputStyle" placeholder="请输入真实姓名"></u--input>
						</u-form-item>
						<u-form-item label="昵称:" labelWidth="70" prop="userInfo.nick" ref="item1">
							<u--input v-model="userInfo.nick"  border="surround" :customStyle="inputStyle" placeholder="请输入昵称"></u--input>
						</u-form-item>
						<u-form-item label="性别:" labelWidth="70" prop="userInfo.sex" ref="item1">
							<view @click="selectSex" style="font-size:30rpx;">{{userInfo.sex!=""?userInfo.sex:"选择性别"}}</view>
						</u-form-item>
						<u-form-item label="年龄:" labelWidth="70" prop="userInfo.age" ref="item1">
							<u--input type="number" v-model="userInfo.age" border="surround" :customStyle="inputStyle" placeholder="请输入年龄"></u--input>
						</u-form-item>
						<u-form-item label="身份证:" labelWidth="70" prop="userInfo.idcard" ref="item1">
							<u--input type="idcard" v-model="userInfo.idcard" border="surround" :customStyle="inputStyle" placeholder="请输入身份证"></u--input>
						</u-form-item>
						<u-form-item label="现居省份:" labelWidth="70" prop="userInfo.city" ref="item1">
							<view style="font-size:30rpx;"  @click="handleGetRegion">{{finalCityVal!=""?finalCityVal:"选择城市"}}</view>
						</u-form-item>
						<u-form-item label="生日:" labelWidth="70" prop="userInfo.birth" ref="item1">
							<u--input v-model="userInfo.birth"  border="surround" :customStyle="inputStyle" placeholder="生日日期"></u--input>
						</u-form-item>
						<u-form-item label="职业:" labelWidth="70" prop="userInfo.job" ref="item1">
							<u--input v-model="userInfo.job"  border="surround" :customStyle="inputStyle" placeholder="填写职业"></u--input>
						</u-form-item>
					</u--form>
					<view style="margin-top:30rpx;"><u-button type="primary" text="提交"></u-button></view>
		</view> <!-- whiteBox end -->
		
		<!-- 性别选择 -->
		<u-picker :show="sexShow" :closeOnClickOverlay="true" :columns="sexColumns" @confirm="confirm" @change="change" @cancel="close" @close="close"></u-picker>
		
		
		<!-- 城市下拉组件  @change="accepted" -->
		<fd-picker ref="fdpicker" @change="accepted"></fd-picker>	
		
	</view> <!-- contain end -->
</template>

<script setup lang='ts'>
	import { ref,reactive } from 'vue'
	const inputStyle=reactive({
		"width":"250px"
	});
	let imgsrc = ref('https://cdn.uviewui.com/uview/album/1.jpg');
	let sexShow=ref(false);
	const sexColumns=reactive([['男', '女']]);
	const selectSex=()=>{
		sexShow.value=true;
	}
	const change=(e:any)=>{
		console.log("选择性别",e);
		userInfo.sex=e.value[0];
	}
	const confirm=(e:any)=>{
		console.log("选择性别",e);
		userInfo.sex=e.value[0];	
		close();
	}
	const close=()=>{
		sexShow.value=false;
	}
	const clickimg=function(){
		//
		/* uni.previewImage({
			current:imgsrc.value,
			urls:[imgsrc.value]
		}); */
		// 选择图片文件
		uni.chooseImage({
			count: 1, //限制1张图片
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			//sourceType: ['album'], //从相册选择
			success:(res)=>{
				console.log(JSON.stringify(res.tempFilePaths));
			},
			fail:err=>{
				uni.$tools.toast("未在隐私协议开通头像api")
				console.log("选择失败",err);
			}
		});
		//uni.$tools.toast("点击头像")
	}
	const userInfo=reactive({
		name: '',
		nick:'',
		age:'',
		sex: '',
		idcard:'',
		birth:'',
		job:'',
		city:''
	});
					
	//城市下拉组件
	let cityVal=ref("")
	let finalCityVal=ref(""); //将省市区合并
	let packRow=reactive([]);
	const accepted=(e:any)=>{
		console.log("城市组件",e);
		packRow = e
		finalCityVal.value=e[0].lablel+" / "+e[1].lablel+" / "+e[2].lablel
		cityVal.value=e[0].lablel+" "+e[1].lablel+" "+e[2].lablel
		console.log("选择区域值:",cityVal.value);
	}
	const fdpicker:any=ref();
	const handleGetRegion=()=>{ 
		console.log("fdpicker对象",fdpicker);
		 fdpicker.value?.showCity()  //显示下拉组件
		 fdpicker.value?.reelect()
	}				
</script>
<style>
	page{
		background:#F8F8F8;
	}
</style>
<style lang='scss' scoped>
	@import "shop_myset.scss";
</style>